<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="楼盘名称" prop="housingName">
        <el-input v-model="form.housingName" placeholder="请输入楼盘名称" />
      </el-form-item>

      <el-form-item label="楼盘地址" prop="housingAddress">
        <el-input v-model="form.housingAddress" placeholder="请输入楼盘地址" />
      </el-form-item>

      <el-form-item label="省" prop="regionId1">
        <el-select v-model="form.regionId1" placeholder="请选择省" @change="seachShi()">
          <el-option
            v-for="item in shengList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="市" prop="regionId2">
        <el-select v-model="form.regionId2" placeholder="请选择市" @change="seachQu()">
          <el-option
            v-for="item in shiList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="区" prop="regionId3">
        <el-select v-model="form.regionId3" placeholder="请选择区">
          <el-option
            v-for="item in quList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商圈" prop="businessId">
        <el-checkbox-group v-model="businessIds">
          <el-checkbox label="超市">超市</el-checkbox>
          <el-checkbox label="广场">广场</el-checkbox>
          <el-checkbox label="商店">商店</el-checkbox>
          <el-checkbox label="新天地">新天地</el-checkbox>
          <el-checkbox label="茂业">茂业</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="地铁" prop="metroId">
        <el-checkbox-group v-model="metroIds">
          <el-checkbox
            v-for="i in metroList"
            :key="i.id"
            :label="i.subway">
            {{i.subway}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="建筑面积" prop="coveredArea">
        <el-input v-model="form.coveredArea" placeholder="请输入建筑面积  (平方米)" />
      </el-form-item>

      <el-form-item label="建筑类型" prop="buildingId">
        <el-select v-model="form.buildingId" placeholder="请选择建筑类型">
          <el-option label="板楼" value="板楼"></el-option>
          <el-option label="塔楼" value="塔楼"></el-option>
          <el-option label="板塔结合" value="板塔结合"></el-option>
          <el-option label="底层" value="底层"></el-option>
          <el-option label="多层" value="多层"></el-option>
          <el-option label="高层" value="高层"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="社区类型" prop="community">
        <el-select v-model="form.community" placeholder="请选择社区类型">
          <el-option label="普通住宅" value="普通住宅"></el-option>
          <el-option label="公寓商住两用" value="公寓商住两用"></el-option>
          <el-option label="商住两用商业地产" value="商住两用商业地产"></el-option>
          <el-option label="普通住宅商住两用" value="普通住宅商住两用"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="物业类型" prop="propertyId">
        <el-select v-model="form.propertyId" placeholder="请选择物业类型">
          <el-option label="普通住宅" value="普通住宅"></el-option>
          <el-option label="公寓" value="公寓"></el-option>
          <el-option label="商住两用" value="商住两用"></el-option>
          <el-option label="商业地产" value="商业地产"></el-option>
          <el-option label="写字楼" value="写字楼"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="楼盘特色" prop="typeId">
        <el-select v-model="form.typeId" placeholder="请选择楼盘特色">
          <el-option label="品牌企业" value="品牌企业"></el-option>
          <el-option label="科技住宅" value="科技住宅"></el-option>
          <el-option label="核心地段" value="核心地段"></el-option>
          <el-option label="精装修" value="精装修"></el-option>
          <el-option label="地铁沿线" value="地铁沿线"></el-option>
          <el-option label="低总价" value="低总价"></el-option>
          <el-option label="学区房" value="学区房"></el-option>
          <el-option label="小户型" value="小户型"></el-option>
          <el-option label="改善型住宅" value="改善型住宅"></el-option>
          <el-option label="宜居社区" value="宜居社区"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="容积率(平方米)" prop="plotRatio">
        <el-input v-model="form.plotRatio" placeholder="请输入容积率 (平方米)" />
      </el-form-item>
      <el-form-item label="得房率" prop="gainRatio">
        <el-input v-model="form.gainRatio" placeholder="请输入得房率" />
      </el-form-item>
      <el-form-item label="绿化率" prop="greeningRate">
        <el-input v-model="form.greeningRate" placeholder="请输入绿化率" />
      </el-form-item>
      <el-form-item label="楼栋数(栋)" prop="buildingNum">
        <el-input v-model="form.buildingNum" placeholder="请输入楼栋数  (栋)" />
      </el-form-item>
      <el-form-item label="开发商" prop="developers">
        <el-input v-model="form.developers" placeholder="请输入开发商" />
      </el-form-item>
      <el-form-item label="物业管理公司" prop="company">
        <el-input v-model="form.company" placeholder="请输入物业管理公司" />
      </el-form-item>
      <el-form-item label="楼盘简介" prop="introduction">
        <el-input v-model="form.introduction" placeholder="请输入楼盘简介" />
      </el-form-item>
      <el-form-item label="周边配套" prop="rimId">
        <el-input v-model="form.rimId" placeholder="请输入周边配套" />
      </el-form-item>
      <el-form-item label="交通情况" prop="trafficId">
        <el-input v-model="form.trafficId" placeholder="请输入交通情况" />
      </el-form-item>

      <el-form-item label="户型图" prop="floorPlan">
        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>

      <el-form-item label="外景图" prop="exteriorPlan">
        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>

      <el-form-item label="施工图" prop="buildPlan">
        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>

      <el-form-item label="效果图" prop="resultPlan">
        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>

      <el-form-item label="首页图" prop="homePlan">
        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {addHousing, updateHousing, searchRegion, searchMetro, uploadFile} from "@/api/house/housing";
import SparkMD5 from 'spark-md5';

export default {
  name: "add",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 楼盘表格数据
      housingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        housingName: null,
        housingAddress: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      shengList: [],
      shiList: [],
      quList: [],
      metroList: [],
      metroIds: [],
      businessIds: [],
      fileList: [],
      options: {
        target: "http://39.98.78.239:8080/file/postFileUpload",  //目标上传 URL
        chunkSize: '2048000',       //分块大小
        fileParameterName: 'file',  //上传文件时文件的参数名，默认file
        maxChunkRetries: 3,         //最大自动失败重试上传次数
        testChunks: false,          //是否开启服务器分片校验
      }
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateHousing(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
            });
          } else {
            this.form.metroId = this.metroIds.join(",");
            this.form.businessId = this.businessIds.join(",");
            addHousing(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$router.push("/housing/list");
            });
          }
        }
      });
    },
    /** 省 下拉框*/
    searchSheng() {
      var id = 1;
      searchRegion(id).then(response => {
        this.shengList = response;
        this.shiList = null;
        this.quList = null;
      });
    },
    /** 市 下拉框*/
    seachShi() {
      if (this.form.regionId1 != null) {
        searchRegion(this.form.regionId1).then(response => {
          this.shiList = response;
          this.quList = null;
        });
      }
    },
    /** 区 下拉框*/
    seachQu() {
      if (this.form.regionId2 != null) {
        searchRegion(this.form.regionId2).then(response => {
          this.quList = response;
        });
        searchMetro(this.form.regionId2).then(response => {
          this.metroList = response;
        })
      }
    },
    onFileAdded(file) {
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file);
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result);
        console.log(md5);
        file.uniqueIdentifier = md5;
      }
    }
  },
  created() {
    this.searchSheng();
  }
}
</script>

<style scoped>

</style>
